<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药品信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <style>
    </style>
</head>
<body>
<div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">列表</blockquote>
    <!-- 添加按钮 -->
    <a class="layui-btn layui-btn-sm" id="add-btn">添加</a>
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">编号查询:</span><input type="text" placeholder="请输入编号" id="input-ypid" style="height: 30px"></a>
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">名称查询:</span><input type="text" placeholder="请输入姓名" id="input-ypname" style="height: 30px"></a>
    <button  style="height: 30px;background-color: #1e9fff;color: whitesmoke;width: 60px;border:1px #1e9fff; border-radius: 4px" id="select_ypId_ypName">搜索</button>
    <!-- 信息表 -->
    <table id="tbl" lay-filter="tbl"></table>
    <script type="text/html" id="tbl-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit-stock">补货</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
<!--    添加弹出层-->
    <div id="add-layer" style="display: none; padding: 20px">
        <form id="add-form" class="layui-form layui-form-pane" lay-filter="update-form">
            <div class="layui-form-item">
                <label class="layui-form-label">药品名称</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text"  name="ypname" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品规格</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="normsid" class="layui-input" lay-verify="required" autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品单位</label>
                <div class="layui-input-block">
                    <label>
                        <select name="unitid" class="unitid"></select>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品价格</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="price" class="layui-input" lay-verify="required" autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品数量</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text"  value="0" name="num" class="layui-input" lay-verify="required" autocomplete="off" disabled>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药房类型</label>
                <div class="layui-input-block">
                    <label>
                        <select name="yfid" class="yfid">

                        </select>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">生产日期</label>
            <div class="layui-input-block">
                <label>
                    <input type="date"  name="sctime" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label">失效日期</label>
                <div class="layui-input-block">
                    <label>
                        <input type="date"  name="sxtime" class="layui-input" lay-verify="required" autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="notes" class="layui-input"  autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add-form-submit">添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
    <!-- 修改弹出层 -->
    <div id="update-layer" style="display: none; padding: 20px">
        <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">
            <div class="layui-form-item">
                <label class="layui-form-label">药品编号</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="ypid" class="layui-input" lay-verify="required" disabled>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品名称</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="ypname" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品规格</label>
                <div class="layui-input-block">
                    <label>
                    <input type="text" name="normsid" class="layui-input" lay-verify="required" autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品单位</label>
                <div class="layui-input-block">
                    <label>
                        <select name="unitid" class="unitid"></select>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品价格</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="price" class="layui-input" lay-verify="required" autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品数量</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="num" class="layui-input" lay-verify="required" autocomplete="off" disabled>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药房类型</label>
                <div class="layui-input-block">
                    <label>
                        <select name="yfid" class="yfid"></select>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="notes" class="layui-input"  autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="update-form-submit">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 补货弹出层 -->
<div id="insert-layer" style="display: none; padding: 20px">
    <form id="insert-form" class="layui-form layui-form-pane" lay-filter="insert-form">

        <div class="layui-form-item">
            <label class="layui-form-label">药品编号</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="ypid" class="layui-input" lay-verify="required" disabled>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">药品名称</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="ypname" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">药品规格</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="normsid" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">药品单位</label>
            <div class="layui-input-block">
                <label>
                    <select name="unitid" class="unitid"></select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">药品价格</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" id="price" name="price" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">药品进价</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" id="jprice" name="jprice" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">进货数量</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="jnum" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">药房类型</label>
            <div class="layui-input-block">
                <label>
                    <select name="yfid" class="yfid"></select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">申请人</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" id="sname" name="sname" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="notes" class="layui-input"  autocomplete="off">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="insert-form-submit">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</div>

<script>
    //遍历下拉框内容
    $(function () {
        $.get("/medicine/SelectUnit",function (date,res) {
            if(res=="success"){
                $(".unitid").empty();
                for (let i = 0; i < date.length; i++) {
                    $(".unitid").append("<option value="+date[i].unitid+">"+date[i].unitname+"</option>")

                }
            }
        });
        setTimeout(function () {
            $.get("/medicine/SelectHome",function (date,res) {
                if(res=="success"){
                    $(".yfid").empty();
                    for (let i = 0; i < date.length; i++) {
                        $(".yfid").append("<option value="+date[i].yfid+">"+date[i].yfname+"</option>")

                    }
                }
            });
        },500)

    })


    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#tbl',
            url: '/medicine/selectAll',
            method: 'get',
            initSort: { //排序
                field: 'sctime' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            cols: [[
                {field: 'ypid', title: '药品编号', width: 90},
                {field: 'ypname', title: '药品名称', width: 150},
                {field: 'normsid', title: '药品规格', width: 120},
                {field: 'unitid', title: '药品单位',templet:function (d) {
                        return d.unit && d.unit.unitname
                    },width: 100},
                {field: 'price', title: '药品单价', width: 100},
                {field: 'num', title: '药品数量', width: 100},
                {field: 'yfid', title: '药房类型',templet:function (d) {
                      return d.dispensary && d.dispensary.yfname
                    }, width: 165},
                {field: 'sctime', title: '生产日期', templet: "<div>{{layui.util.toDateString(d.sctime, 'yyyy-MM-dd')}}</div>", width: 100},
                {field: 'sxtime', title: '失效日期', templet: "<div>{{layui.util.toDateString(d.sxtime, 'yyyy-MM-dd')}}</div>",width: 100},
                {field: 'notes', title: '备注', width: 127},
                {toolbar: '#tbl-toolbar', title: '操作', width: 180}
            ]],
            // 根据字段库存数量改变字体颜色
            done:function (response) {
                var tableView=this.elem.next();
                $.each(response.data,function (index,itme) {
                    if(itme.num <= "100"&&itme.num > "50"){
                        tableView.find('tbody tr[data-index="'+ index +'"]').css('color','orange')
                    }
                    if(itme.num<="50"&&itme.num >= "0"){
                        tableView.find('tbody tr[data-index="'+ index +'"]').css('color','red')
                    }
                })
            },
            page: {
                limit: 5,//指定每页显示的条数
                limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
            }//开启分页

            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            // 表格容器id，用于表格重载
            id: 'tbl'
        });
        var AddIndex;
        // 显示添加弹出层
        $('#add-btn').click(function () {
            // 每次显示前重置表单
            $('#add-form')[0].reset();
            AddIndex = layer.open({
                type: 1,
                title: '添加',
                skin: 'layui-layer-molv',
                area: ['500px'],
                content: $('#add-layer')
            });
        });

        // 添加表单提交
        form.on('submit(add-form-submit)',function (data) {
            // ajax方式添加
            console.log(data.field)
            $.ajax({
                url: "/medicine/insert",
                type: "get",
                data: data.field,
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {

                    console.log(data)
                    if (data.status === 1) {
                        layer.close(AddIndex);
                        layer.msg('添加成功');
                        table.reload('tbl');
                    } else {
                        layer.msg('添加失败');
                    }
                },
                error: function () {
                    console.log("ajax error");
                }
            });
            // 阻止表单跳转
            return false;
        });
        table.on('tool(tbl)', function (obj) {
            // 获取当前行数据和lay-event的值
            var data = obj.data;
            var event = obj.event;
            // 删除事件
            if (event === 'del') {
                layer.confirm('确定删除该吗？', function (index) {
                    // ajax方式删除
                    $.ajax({
                        url: '/medicine/' + data.ypid,
                        type: "GET",
                        dataType: 'json',
                        success: function (data) {
                            if (data.status === 1) {
                                layer.msg('删除成功');
                                table.reload('tbl');
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        error: function () {
                            console.log("ajax error");
                        }
                    });
                    layer.close(index);
                });
            }
            var UpIndex;
            // 修改数据回显
            if (event === 'edit') {
                // 表格数据回显
                form.val('update-form', {
                    "ypid": data.ypid,
                    "ypname":data.ypname,
                    "normsid": data.normsid,
                    "unitid":data.unit.unitid,
                    "price":data.price,
                    "num":data.num ,
                    "yfid":data.dispensary.yfid,
                    "notes":data.notes
                });
                // 显示修改表单的弹出层

                UpIndex= layer.open({
                    type: 1,
                    title: '更新信息',
                    skin: 'layui-layer-molv',
                    area: ['500px'],
                    content: $('#update-layer')
                });
                // 修改表单提交
                form.on('submit(update-form-submit)',function (data) {
                    console.log(data.field)
                    // ajax方式修改
                    $.ajax({
                        url: "/medicine/update",
                        type: "get",
                        data: data.field,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (data) {
                            if (data.status === 1) {
                                layer.close(UpIndex);
                                layer.msg('更新成功');
                                table.reload('tbl');
                            } else {
                                layer.msg('更新失败');
                            }
                        },
                        error: function () {
                            console.log("ajax error");
                        }
                    });
                    // 阻止表单跳转
                    return false;
                });
            }
            // 补货数据回显
            if (event === 'edit-stock') {
                // 表格数据回显
                form.val('insert-form', {
                    "ypid": data.ypid,
                    "ypname": data.ypname,
                    "normsid": data.normsid,
                    "unitid": data.unit.unitid,
                    "price": data.price,
                    "num": data.num,
                    "yfid": data.dispensary.yfid,
                    "notes": data.notes
                });
                // 显示补货表单的弹出层

                UpIndex = layer.open({
                    type: 1,
                    title: '补货信息',
                    skin: 'layui-layer-molv',
                    area: ['500px'],
                    content: $('#insert-layer')
                });
                // 表单提交
                form.on('submit(insert-form-submit)',function (data) {
                  var price = $("#price").val(); // 售价
                  var jprice = $("#jprice").val(); // 进价

                    if(Number(price) <= Number(jprice)){
                        layer.msg("进价只能小于售价");
                    } else {
                        // ajax方式修改
                        $.ajax({
                            url: "/check/insert",
                            type: "get",
                            data: data.field,
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function (data) {
                                if (data.status === 1) {
                                    layer.close(UpIndex);
                                    layer.msg('提交成功');
                                    table.reload('tbl');
                                } else {
                                    layer.msg('提交失败');
                                }
                            },
                            error: function () {
                                console.log("ajax error");
                            }
                        });
                    }
                    // 阻止表单跳转
                    return false;
                });

            }

        });
        //精确查询  根据jid查询
        $("#select_ypId_ypName").click(function () {
            var ypid=$("#input-ypid").val();
            var ypname=$("#input-ypname").val();
            table.render({
                elem: '#tbl',
                url: '/medicine/select_ypId_ypName?ypid='+ypid+'&ypname='+ypname,
                method: 'get',
                cols: [[
                    {field: 'ypid', title: '药品编号', width: 90},
                    {field: 'ypname', title: '药品名称', width: 150},

                    {field: 'normsid', title: '药品规格', width: 120},
                    {field: 'unitid', title: '药品单位',templet:function (d) {
                            return d.unit.unitname
                        },width: 100},
                    {field: 'price', title: '药品单价', width: 100},
                    {field: 'num', title: '药品数量', width: 100},
                    {field: 'yfid', title: '药房编号',templet:function (d) {
                            return d.dispensary.yfname
                        }, width: 165},
                    {field: 'sctime', title: '生产日期', templet: "<div>{{layui.util.toDateString(d.sctime, 'yyyy-MM-dd')}}</div>", width: 100},
                    {field: 'sxtime', title: '失效日期', templet: "<div>{{layui.util.toDateString(d.sxtime, 'yyyy-MM-dd')}}</div>",width: 100},
                    {field: 'notes', title: '备注', width: 127},
                    {toolbar: '#tbl-toolbar', title: '操作', width: 180}
                ]],
                // 根据字段库存数量改变字体颜色
                done:function (response) {
                    var tableView=this.elem.next();
                    $.each(response.data,function (index,itme) {
                        if(itme.num <= "100"&&itme.num > "50"){
                            tableView.find('tbody tr[data-index="'+ index +'"]').css('color','orange')
                        }
                        if(itme.num<="50"&&itme.num >= "0"){
                            tableView.find('tbody tr[data-index="'+ index +'"]').css('color','red')
                        }
                    })
                },
                page:{
                    limit:5,//指定每页显示的条数
                    limits:[5,10,20,40,50,60,80,100]//每页条数的选中
                }//开启分页

                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    }
                    else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                },
                // 表格容器id，用于表格重载
                id: 'tbl'
            });
        })
    })
</script>
<script>
    $(function () {
        setTimeout(function () {
            $.get("/loginName",function (date) {
                $("#sname").val(date)
            })
        },100)

    })
</script>
</body>
</html>